{% extends 'IcsocUIBundle::page.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@IcsocUIBundle/Resources/public/css/bootstrap.my.css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <button class="btn btn-info btn-sm btn-bold" id="open_window" style="margin: 2px;display: none;">
        <i class="ace-icon fa fa-th-large red2"></i> 全屏窗口
    </button>
    <button class="btn btn-success btn-sm" id="open_fullscreen" style="margin: 2px;display: none;" onclick="fn_fullscreen();">
        <i class="ace-icon fa fa-arrows-alt blue"></i> 全屏
    </button>
    <button class="btn btn-success btn-sm pull-right" id="close_fullscreen" style="margin: 2px;display: none;" onclick="close_fullscreen();">
        <i class="ace-icon fa fa-arrows red2"></i> 退出全屏
    </button>
    <div id="fullscreen" style="margin:0 auto;background:#ffffff;">
        {% if is_call_show == 1 %}
            <!-- 显示呼叫中心话务数据Begin -->
            <div class="row" style="margin:1px;">
                {% for key,value in call_center %}
                    <div class="progress" style="height:80px">
                        {% for call in value %}
                            <div class="progress-bar" style="background-color: {{ call.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.call_rate[key] }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span style="font: 180% Arial; font-size: {{ call.style.fontSize }};color: {{ call.style.fontColor }} !important">{{ call.name }}</span><br>
                                <span style="font: 200% Arial; font-size: {{ call.style.fontSize }};color: {{ call.style.fontColor }} !important;" id="{{ call.id }}">0</span>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
            <!-- 显示呼叫中心话务数据End -->
        {% endif %}
        {% if user_type == 0 or user_type == 1 %}
            <!-- 显示技能组话务数据Begin -->
            {% if is_que_show == 1 %}
                <div class="row" style="margin:1px;">
                    {% for key,que in queInfos %}
                        <!-- 创建panel BEGIN-->
                        <div class="panel panel-info" id="que{{ que.id }}">
                            <div class="panel-heading">{{ que.que_name }}</div>
                            <div class="panel-body" style="padding: 2px;">
                                {% for key,value in que_center %}
                                    <div class="progress" style="height:80px">
                                        {% for ques in value %}
                                            <div class="progress-bar" style="width: {{ rates.que_rate[key] }};background-color: {{ ques.style.background }};box-shadow: none;padding: 3px;line-height: 18px;">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span style="font: 180% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important">{{ ques.name }}</span><br>
                                                <span style="font: 200% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important" id="que{{ que.id }}_{{ ques.id }}">0</span>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% endfor %}
                                {% if isEnableGroup == 1 and is_agent_show == 1 and is_agent_group_show == 1 %}
                                    <div class="progress" name="questrip" style="height:100%; padding-left: 0px;" id="que{{ que.id }}_strip"></div>
                                    {% if que.group_info is empty %}
                                        {#<div class="alert alert-block alert-danger">#}
                                        {#<button type="button" class="close" data-dismiss="alert">#}
                                        {#<i class="ace-icon fa fa-times"></i>#}
                                        {#</button>#}
                                        {#<i class="ace-icon fa fa-times"></i>#}
                                        {#该技能组未配置所属业务组#}
                                        {#</div>#}
                                    {% else %}
                                        {% for group in que.group_info %}
                                            <div class="panel panel-info" id="que{{ que.id }}_group{{ group.group_id }}">
                                                <div class="panel-heading">{{ group.group_name }}</div>
                                                <div class="panel-body" style="padding: 2px;">
                                                    <div class="progress" name="strip" data-type="group{{ group.group_id }}_strip" style="height:100%; padding-left: 0px;" id="que{{ que.id }}_group{{ group.group_id }}_strip"></div>
                                                    <div name="agentdetail" data-type="group{{ group.group_id }}_agent" id="que{{ que.id }}_group{{ group.group_id }}_agent"></div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    {% endif %}
                                {% endif %}
                            </div>
                        </div>
                        <!-- 创建panel END-->
                    {% endfor %}
                </div>
            {% endif %}
            <!-- 显示技能组话务数据End -->
        {% else %}
            <div class="alert alert-block alert-danger">
                <button type="button" class="close" data-dismiss="alert">
                    <i class="ace-icon fa fa-times"></i>
                </button>
                <i class="ace-icon fa fa-times"></i>
                该角色无任何技能组权限
            </div>
        {% endif %}
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@IcsocUIBundle/Resources/public/js/amazeui.min.js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var agentLimit = {{ agentLimit|raw }};
        var agentStyle = {{ agentStyle|raw }};
        $(document).ready(function() {
            var refresh_time = parseInt('{{ refresh_time }}');
            refresh_time = refresh_time * 1000;
            {% if is_call_show == 1 %}
            get_call_center_data();
            window.setInterval(get_call_center_data, refresh_time);
            {% endif %}
            {% if is_que_show == 1 and user_type == 0 or user_type == 1 %}
            get_que_center_data();
            window.setInterval(get_que_center_data, refresh_time);
            {% endif %}
            {% if isEnableGroup == 1 and is_agent_show == 1 and is_agent_group_show == 1 %}
            window.setInterval(refreshTime, 1000);
            get_total_strip_data();
            get_agent_center_data();
            window.setInterval(function () {
                get_total_strip_data()
            }, refresh_time);
            window.setInterval(function () {
                get_agent_center_data()
            }, refresh_time);
            {% endif %}
            $("#open_window").on('click', function() {
                var url = self.location.href;
                url = url + "&is_fullscreen=1";
                window.open(url);
            });
            {% if is_fullscreen == 0 %}
            $("#open_window").css('display', '');
            $("#open_fullscreen").css('display', 'none');
            $("#close_fullscreen").css('display', 'none');
            {% else %}
            $("#open_window").css('display', 'none');
            $("#open_fullscreen").css('display', '');
            $("#close_fullscreen").css('display', '');
            {% endif %}
        });

        //获取呼叫中心话务数据
        function get_call_center_data()
        {
            var url = "{{ path('icsoc_monitor_screen_callcenter_data') }}";
            $.ajax({
                type: 'post',
                url: url,
                data: {'call_data':'{{ json_call_center }}', 'role_id': '{{ role_id }}'},
                dataType: 'json',
                cache: false,
                success: function(responce)
                {
                    if (responce.code == 200) {
                        $.each(responce.data, function(index,value) {
                            if ($("#"+index).length > 0) {
                                //证明此元素存在
                                $("#"+index).html(value);
                            }
                        });
                    } else {
                        console.info(responce);
                    }
                }
            });
        }

        //获取技能组话务数据
        function get_que_center_data()
        {
            var ques = [];
            var que_id = "";
            {% for key,que in queInfos %}
            ques.push('{{ que.id }}');
            {% endfor %}
            que_id = ques.join(",");
            //调用获取技能组数据地址
            var url = "{{ path('icsoc_monitor_screen_quecenter_data') }}";
            $.ajax({
                type: 'post',
                url: url,
                data: {'que_data':'{{ json_que_center }}','que_id':que_id, 'role_id': '{{ role_id }}'},
                dataType: 'json',
                cache: false,
                success: function(responce)
                {
                    if (responce.code == 200) {
                        $.each(responce.data, function(index,value) {
                            //此index为技能组ID
                            if ($("#que"+index).length > 0) {
                                $.each(value, function(key, item) {
                                    if ($("#que"+index+"_"+key).length > 0) {
                                        $("#que"+index+"_"+key).html(item);
                                    }
                                });
                            }
                        });
                    } else {
                        console.info(responce);
                    }
                }
            });
        }

        //获取坐席监控数据
        function get_agent_center_data()
        {
            var group_id = "";
            var type = 2;
            var url = "{{ path('icsoc_monitor_screen_agentcenter_data') }}";
            var rand = '{{ redisKey }}';
            //无限技能组权限
            {% if isEnableGroup == 1 and is_agent_show == 1 and is_agent_group_show == 1 %}
            group_id = '{{ groupIds }}';
            {% endif %}
            $.ajax({
                type: 'post',
                url: url,
                data: {'group_id':group_id, 'type':type, 'role_id': '{{ role_id }}', 'only_show_strip':0, 'rand':rand},
                dataType: 'json',
                cache: false,
                success: function(responce) {
                    if (responce.code == 200) {
                        var id = "group";
                        //显示工具条
                        if (responce.agentStrip != "") {
                            $("div[name='strip']").each(function() {
                                $(this).empty();
                                var realdiv = $(this).attr('id');
                                var real_data_type = $(this).attr('data-type');
                                //循环所有的strip
                                $.each(responce.agentStrip, function(index, value) {
                                    if (id+index+"_strip" == real_data_type) {
                                        var tmp = '';
                                        $.each(value, function(key, item) {
                                            tmp += '<div class="progress-bar" style="background-color: '+agentStyle[key]['background']+' !important;padding: 3px;width:'+item.rate+';line-height: 18px;">';
                                            tmp += '<span class="sr-only">10% Complete (success) </span>';
                                            tmp += '<span style="font: 200% Arial;color:'+agentStyle[key]['fontColor']+' !important;font-size:20px">'+item.num+'</span>';
                                            tmp += '</div>';
                                        });
                                        $("#"+realdiv).html(tmp);
                                    }
                                });
                            });
                        } else {
                            $.each($("div [name='strip']"), function(i, v) {
                                $(this).empty();
                            });
                        }
                        //显示坐席数据
                        if (responce.agentData != "") {
                            $("div[name='agentdetail']").each(function() {
                                var real_data_type = $(this).attr('data-type');
                                var realId = $(this).attr('id');
                                $.each(responce.agentData, function(index, value) {
                                    if (id+index+"_agent" == real_data_type) {
                                        $.each(value, function(key, item) {
                                            var btn_id = realId+"_btn_"+item.ag_id;
                                            if (item.type == 2 || item.type == 1) {
                                                //新增
                                                var btn = create_btn(item, btn_id);
                                                $("#"+btn_id).parent().remove();
                                                $("#"+realId).append(btn);
                                            } else if (item.type == 3) {
                                                //删除
                                                $("#"+btn_id).parent().remove();
                                            } else {
                                                //删除
                                                $("#"+btn_id).parent().remove();
                                            }
                                        });
                                    }

                                    var div = $("#"+realId+" span").toArray().sort(function(a,b){
                                        return parseInt($(a).attr('sort')) - parseInt($(b).attr('sort'))
                                    });
                                    $(div).appendTo("#"+realId);
                                });
                            });
                        }
                    }
                }
            });
        }

        //获取总数据条数
        function get_total_strip_data()
        {
            var url = "{{ path('icsoc_monitor_screen_agentcenter_data') }}";
            var ques = [];
            var que_id = "";
            {% for key,que in queInfos %}
            ques.push('{{ que.id }}');
            {% endfor %}
            que_id = ques.join(",");
            var type = 1;
            var rand = "{{ redisKey1 }}";
            $.ajax({
                type: 'post',
                url: url,
                data: {'que_id':que_id, 'type':type, 'role_id': '{{ role_id }}', 'only_show_strip':1, 'rand':rand},
                dataType: 'json',
                cache: false,
                success: function(responce) {
                    if (responce.code == 200) {
                        var id = "#que";
                        //显示工具条
                        if (responce.agentStrip != "") {
                            $("div[name='questrip']").each(function() {
                                $(this).empty();
                                var real_id = "#"+$(this).attr('id');
                                //循环所有的strip
                                $.each(responce.agentStrip, function(index, value) {
                                    if (id+index+"_strip" == real_id) {
                                        var tmp = '';
                                        $.each(value, function(key, item) {
                                            tmp += '<div class="progress-bar" style="background-color: '+agentStyle[key]['background']+' !important;padding: 3px;width:'+item.rate+';line-height: 18px;">';
                                            tmp += '<span class="sr-only">10% Complete (success) </span>';
                                            tmp += '<span style="font: 200% Arial;color:'+agentStyle[key]['fontColor']+' !important;font-size:20px">'+item.num+'</span>';
                                            tmp += '</div>';
                                        });
                                        $(id+index+"_strip").html(tmp);
                                    }
                                });
                            });
                        } else {
                            $.each($("div [name='questrip']"), function(i, v) {
                                $(this).empty();
                            });
                        }
                    }
                }
            });
        }

        /**
         * 新建坐席
         *
         * @param item
         * @param id
         * @returns {string}
         */
        function create_btn(item,id)
        {
            var _strr = "";
            _strr += "<span sort='"+item.ag_sta+"'><button id='"+id+"' type=\"button\" class=\"btn\" style=\"margin: 1px;padding: 1px;width:73px;height:65px;border-color:"+agentStyle[item.ag_sta]['background']+" !important;background-color:"+agentStyle[item.ag_sta]['background']+" !important;color:"+agentStyle[item.ag_sta]['fontColor']+" !important;font-size:"+agentStyle[item.ag_sta]['fontSize']+"\">";
            _strr += "<div>" +item.ag_name+"</div>";
            _strr += "<div>" +item.status+"</div>";
            _strr += "<div class='secs' data='"+item.ag_sta_time+"'>" +item.status_secs+"</div>";
            _strr += "</button></span>";

            return _strr;
        }

        //刷新时间
        function refreshTime()
        {
            $('.secs').each(function() {
                var secs = parseInt($(this).attr("data"));
                var agsta = $(this).parent().parent().attr('sort');
                var status = $(this).parent().children().eq(1).html();
                agsta = parseInt(agsta);
                if (agentLimit[agsta] == 0) {
                    $(this).parent().children().eq(1).html(status);
                } else {
                    if (secs >= agentLimit[agsta]) {
                        if ($(this).parent().children().eq(1).find("strong").length > 0) {
                            $(this).parent().children().eq(1).html(status);
                        } else {
                            $(this).parent().children().eq(1).html("<strong style='font: 90% 微软雅黑;color: red !important;font-weight:bold;'>!</strong>&nbsp;"+status);
                        }
                    } else {
                        $(this).parent().children().eq(1).html(status);
                    }
                }
                secs++;
                $(this).html(formate_time(secs));
                $(this).attr("data", secs);
            });
        }

        //格式化时间
        function formate_time(dur)
        {
            if(dur < 0)
            {
                return '';
            }
            else
            {
                var hour = parseInt(dur/3600);
                dur = dur%3600;
                var minute = parseInt(dur/60);
                var second = dur%60;
                if(hour < 10)
                {
                    hour = "0"+hour;
                }
                if(minute < 10)
                {
                    minute = "0"+minute;
                }
                if(second < 10)
                {
                    second = "0"+second;
                }

                var format_dur = hour+":"+minute+":"+second;
                return format_dur;
            }
        }

        /**
         * 调用全屏操作
         */
        function fn_fullscreen()
        {
            var e = $.AMUI.fullscreen;
            if (e.enabled) {
                e.request();
            } else {
                // Ignore or do something else
            }
        }

        /**
         * 退出全屏状态
         */
        function close_fullscreen()
        {
            var e = $.AMUI.fullscreen;
            if (e.enabled) {
                e.exit();
            } else {
                // Ignore or do something else
            }
        }
    </script>
{% endblock %}